<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--上述2个meta标签必须放在最前面，任何其他内容都必须放在后面-->
		<title>CSS组件</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<!--下拉菜单-->
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenul" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				系统功能
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenul">
				<li><a href="#">文章列表</a></li>
				<li><a href="#">行业资讯</a></li>
				<li><a href="#">技术前沿</a></li>
				<li class=""><a href="#">联系我们</a></li>
			</ul>
		</div>
		<hr />
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenul" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				电子产品
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu">
				<li class="dropdown-header">电脑</li>
				<li><a href="#">笔记本电脑</a></li>
				<li><a href="#">台式电脑</a></li>
				<li><a href="#">一体式电脑</a></li>
				<li class="divider"></li>
				<li class="dropdown-header"></li>
				<li><a href="#">电视机</a></li>
				<li><a href="#">电冰箱</a></li>
				<li><a href="#">洗衣机</a></li>
			</ul>
		</div>
		<hr />
		<!--按钮组-->
		<div class="container">
			<button class="btn btn-default">网站主页</button>
			<button class="btn btn-primary">新闻资讯</button>
			<button class="btn btn-danger">技术前沿</button>
			<button class="btn btn-warning">联系我们</button>
			<button class="btn btn-success">业务受理</button>
			<!--大型按钮组：btn-group btn-group-lg,默认大小按钮组：btn-group,小型按钮组：btn-group btn-group-sm,超小型按钮组：btn-group btn-group-xs,垂直按钮组:btn-group-vertical-->
			<br />
			<br />
			<div class="btn-group">
				<button class="btn btn-default">网站主页</button>
				<button class="btn btn-primary">新闻资讯</button>
				<button class="btn btn-danger">技术前沿</button>
				<button class="btn btn-warning">联系我们</button>
				<button class="btn btn-success">业务受理</button>
			</div>
			</div>
			<div class="btn-toolbar">
				<div class="btn-group"></div>
				<div class="btn-group"></div>
				<div class="btn-group"></div>
			</div>
		<hr />
		
		<div class="btn-group btn-group-lg">//大型按钮组
				<button class="btn btn-default">网站主页</button>
				<button class="btn btn-primary">新闻资讯</button>
				<button class="btn btn-danger">技术前沿</button>
				<button class="btn btn-warning">联系我们</button>
				<button class="btn btn-success">业务受理</button>
		</div>
		<br />
		<div class="btn-group">//默认大小按钮组
				<button class="btn btn-default">网站主页</button>
				<button class="btn btn-primary">新闻资讯</button>
				<button class="btn btn-danger">技术前沿</button>
				<button class="btn btn-warning">联系我们</button>
				<button class="btn btn-success">业务受理</button>
		</div>
		<br />
		<div class="btn-group btn-group-sm">//小型按钮组
				<button class="btn btn-default">网站主页</button>
				<button class="btn btn-primary">新闻资讯</button>
				<button class="btn btn-danger">技术前沿</button>
				<button class="btn btn-warning">联系我们</button>
				<button class="btn btn-success">业务受理</button>
		</div>
		<br />
		<div class="btn-group btn-group-xs">//超小型按钮组
				<button class="btn btn-default">网站主页</button>
				<button class="btn btn-primary">新闻资讯</button>
				<button class="btn btn-danger">技术前沿</button>
				<button class="btn btn-warning">联系我们</button>
				<button class="btn btn-success">业务受理</button>
		</div>
		<hr />
		<div class="container">
			<div class="btn-group-vertical">
			<button class="btn btn-default">网站主页</button>
			<button class="btn btn-primary">新闻资讯</button>
			<button class="btn btn-danger">技术前沿</button>
			<button class="btn btn-warning">联系我们</button>
			<button class="btn btn-success">业务受理</button>
			</div>
		</div>
		<hr />
		<div class="container">
			<div class="btn-group">
				<button class="btn btn-default">网站主页</button>
				<button class="btn btn-primary">新闻资讯</button>
				<button class="btn btn-danger">技术前沿</button>
			<div class="btn-group">
				<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenul" data-toggle="dropdown">
					业务受理
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">服务投诉</a></li>
					<li><a href="#">建议采纳</a></li>
					<li><a href="#">网友来信</a></li>
				</ul>
			</div>
			<button class="btn btn-warning">联系我们</button>
			</div>
		</div>
		<hr />
		<div class="btn-group btn-group-justified">
			<a class="btn btn-default">网站主页</a>
			<a class="btn btn-primary">新闻资讯</a>
			<a class="btn btn-danger">技术前沿</button>
			<a class="btn btn-warning">联系我们</button>
			<a class="btn btn-success">业务受理</button>
		</div>
	</hr>
	<div class="btn-group btn-group-justified">
		<div class="btn-group">
			<button class="btn btn-default">网站主页</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-primary">新闻资讯</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-danger">技术前沿</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-warning">联系我们</button>
		</div>
	</div>
	</body>
</html>
